<div class="pl-3 pr-3 bg-white">
    <h4>客户信息</h4>
    <ts-tabs [tabs]="['新增客户','财务信息','联系人信息']" [color]="global.params.color" [target]="tsTabs" activeTab="新增客户">
    </ts-tabs>
</div>
<div class="p-2">
    <div #tsTabs='tsTabs' tsTabs class="card">
        <div class="card-body">
            <div tsTab tab='新增客户'>
                <div class="card-body">
                    <div class="container m-0">
                        <div class="form-group row">
                            <label class="col-sm-2 col-form-label label-required text-right">客户名称</label>
                            <div class="col-sm-10" style="display: flex">
                                <input [(ngModel)]="goods.goodsName" type="text" class="form-control" placeholder="请输入客户名称">
                                <div class="invalid-feedback">客户名称是必填的</div>
                                <label class="col-sm-2 col-form-label label-required text-right">渠道属性</label>
                                <select [(ngModel)]="goods.goodsParentType" class="custom-select" placeholder="请选择渠道属性">
                                    <option *ngFor="let type of parentTypes" [ngValue]="type.value">{{type.text}}</option>
                                </select>
                            </div>
                        </div>

                        <div class="form-group row">
                            <label class="col-sm-2 col-form-label label-required text-right">客户地址</label>
                            <div class="col-sm-10" style="display: flex">
                                <input [(ngModel)]="goods.goodsName" type="text" class="form-control" placeholder="请输入客户地址">
                                <label class="col-sm-2 col-form-label label-required">手机端定位</label>
                                <label class="col-sm-2 col-form-label label-required text-right">信用额度</label>
                                <input [(ngModel)]="goods.goodsName" type="text" class="form-control" placeholder="请输入信用额度人">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="col-sm-2 col-form-label label-required text-right">客户等级</label>
                            <div class="col-sm-10" style="display: flex">
                                <input [(ngModel)]="goods.goodsName" type="text" class="form-control" placeholder="请输入客户等级">
                                <label class="col-sm-2 col-form-label label-required text-right">商圈属性</label>
                                <input [(ngModel)]="goods.goodsName" type="text" class="form-control" placeholder="请输入商圈属性">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="col-sm-2 col-form-label label-required text-right">业务联系人</label>
                            <div class="col-sm-10" style="display: flex">
                                <input [(ngModel)]="goods.goodsName" type="text" class="form-control" placeholder="请输入业务联系人">
                                <label class="col-sm-2 col-form-label label-required text-right">业务联系电话</label>
                                <input [(ngModel)]="goods.goodsName" type="text" class="form-control" placeholder="请输入业务联系电话">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="col-sm-2 col-form-label label-required text-right">微信</label>
                            <div class="col-sm-10" style="display: flex">
                                <input [(ngModel)]="goods.goodsName" type="text" class="form-control" placeholder="请输入微信">
                                <label class="col-sm-2 col-form-label label-required text-right">QQ</label>
                                <input [(ngModel)]="goods.goodsName" type="text" class="form-control" placeholder="请输入QQ">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="col-sm-2 col-form-label label-required text-right">物流联系人</label>
                            <div class="col-sm-10" style="display: flex">
                                <input [(ngModel)]="goods.goodsName" type="text" class="form-control" placeholder="请输入物流联系人">
                                <label class="col-sm-2 col-form-label label-required text-right">物流联系电话</label>
                                <input [(ngModel)]="goods.goodsName" type="text" class="form-control" placeholder="请输入物流联系电话">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="col-sm-2 col-form-label label-required text-right">区域</label>
                            <div class="col-sm-10" style="display: flex">
                                <select [(ngModel)]="goods.goodsParentType" class="custom-select" placeholder="请选择区域">
                                    <option *ngFor="let type of parentTypes" [ngValue]="type.value">{{type.text}}</option>
                                </select>
                                <label class="col-sm-2 col-form-label label-required text-right">所属业务员</label>
                                <select [(ngModel)]="goods.goodsParentType" class="custom-select" placeholder="请选择所属业务员">
                                    <option *ngFor="let type of parentTypes" [ngValue]="type.value">{{type.text}}</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="col-sm-2 col-form-label label-required text-right">社会统一代码</label>
                            <div class="col-sm-10" style="display: flex">
                                <input [(ngModel)]="goods.goodsName" type="text" class="form-control" placeholder="请输入社会统一代码">
                                <label class="col-sm-2 col-form-label label-required text-right">财务联系电话</label>
                                <input [(ngModel)]="goods.goodsName" type="text" class="form-control" placeholder="请输入财务联系电话">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="col-sm-2 col-form-label label-required text-right">行业许可证号</label>
                            <div class="col-sm-10" style="display: flex">
                                <input [(ngModel)]="goods.goodsName" type="text" class="form-control" placeholder="请输入行业许可证号">
                                <label class="col-sm-2 col-form-label label-required text-right">Email</label>
                                <input [(ngModel)]="goods.goodsName" type="text" class="form-control" placeholder="请输入Email">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="col-sm-2 col-form-label label-required text-right">送货地址</label>
                            <div class="col-sm-10" style="display: flex">
                                <input [(ngModel)]="goods.goodsName" type="text" class="form-control" placeholder="请输入送货地址">
                                <label class="col-sm-2 col-form-label label-required text-right">送货联系人</label>
                                <input [(ngModel)]="goods.goodsName" type="text" class="form-control" placeholder="请输入送货联系人">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="col-sm-2 col-form-label label-required text-right">营业面积</label>
                            <div class="col-sm-10" style="display: flex">
                                <input [(ngModel)]="goods.goodsName" type="text" class="form-control" placeholder="请输入营业面积">
                                <label class="col-sm-2 col-form-label label-required text-right">送货联系人</label>
                                <input [(ngModel)]="goods.goodsName" type="text" class="form-control" placeholder="请输入送货联系人">
                            </div>
                        </div>
                        <div style="text-align: center;height: 45px;font-weight: 900">登入信息</div>

                        <div class="form-group row">
                            <label class="col-sm-2 col-form-label label-required text-right">客户下单</label>
                            <div class="col-sm-7">
                                <ts-switch [color]="global.params.color" style="padding-top: 10px" [values]="{open:1,close:0}" [(ngModel)]="goods.isActive"></ts-switch>
                            </div>
                        </div>
                    </div>
                </div>


                <div class="mt-2 m-btn">
                    <button routerLink="/customer/customer" tsBtn color="white">返回列表</button>
                    <button *ngIf="goods.id===0" tsBtn loading color="success" (submit)="confirmInsert($event)">确认添加</button>
                    <button *ngIf="goods.id>0" tsBtn loading color="primary" (submit)="confirmUpdate($event)">确认修改</button>
                </div>
            </div>


            <div tsTab tab='联系人信息'>
                <div class="card-body">
                    <div class="container m-0">
                        <div class="form-group row">
                            <label class="col-sm-2 col-form-label label-required text-right">联系人姓名</label>
                            <div class="col-sm-10" style="display: flex">
                                <input [(ngModel)]="goods.goodsName" type="text" class="form-control" placeholder="请输入联系人姓名">
                                <label class="col-sm-2 col-form-label label-required text-right">手机</label>
                                <input [(ngModel)]="goods.goodsName" type="text" class="form-control" placeholder="请输入手机">
                                <div class="invalid-feedback">联系人姓名是必填的</div>
                                <label class="col-sm-2 col-form-label label-required text-right">角色</label>
                                <input [(ngModel)]="goods.goodsName" type="text" class="form-control" placeholder="请输入角色">
                                <div class="invalid-feedback">角色是必填的</div>
                                <label class="col-sm-2 col-form-label label-required text-right">生日</label>
                                <input [(ngModel)]="goods.goodsName" type="text" class="form-control" placeholder="请输入生日">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="col-sm-2 col-form-label label-required text-right">绑定微信</label>
                            <div class="col-sm-10" style="display: flex">
                                <input [(ngModel)]="goods.goodsName" type="text" class="form-control" placeholder="请输入绑定微信">
                                <label class="col-sm-2 col-form-label label-required text-right">QQ</label>
                                <input [(ngModel)]="goods.goodsName" type="text" class="form-control" placeholder="请输入QQ">

                                <label class="col-sm-2 col-form-label label-required text-right">职位</label>
                                <input [(ngModel)]="goods.goodsName" type="text" class="form-control" placeholder="请输入职位">

                                <label class="col-sm-2 col-form-label label-required text-right">其他</label>
                                <input [(ngModel)]="goods.goodsName" type="text" class="form-control" placeholder="请输入其他">
                            </div>
                        </div>
                    </div>
                </div>


                <div class="mt-2 m-btn">
                    <button routerLink="/customer/customer" tsBtn color="white">返回列表</button>
                    <button *ngIf="goods.id===0" tsBtn loading color="success" (submit)="confirmInsert($event)">确认添加</button>
                    <button *ngIf="goods.id>0" tsBtn loading color="primary" (submit)="confirmUpdate($event)">确认修改</button>
                </div>
            </div>
            <div tsTab tab='财务信息'>
                <div class="card-body">
                    <div class="container m-0">
                        <div class="form-group row">
                            <label class="col-sm-2 col-form-label label-required text-right">开票名称</label>
                            <div class="col-sm-10" style="display: flex">
                                <input [(ngModel)]="goods.goodsName" type="text" class="form-control" placeholder="请输入开票名称">
                                <div class="invalid-feedback">开票名称是必填的</div>
                                <label class="col-sm-2 col-form-label label-required text-right">发票类型</label>
                                <select [(ngModel)]="goods.goodsParentType" class="custom-select" placeholder="请选择发票类型">
                                    <option *ngFor="let type of parentTypes" [ngValue]="type.value">{{type.text}}</option>
                                </select>
                            </div>
                        </div>

                        <div class="form-group row">
                            <label class="col-sm-2 col-form-label label-required text-right">公司地址</label>
                            <div class="col-sm-10" style="display: flex">
                                <input [(ngModel)]="goods.goodsName" type="text" class="form-control" placeholder="请输入公司地址">
                                <label class="col-sm-2 col-form-label label-required text-right">税号</label>
                                <input [(ngModel)]="goods.goodsName" type="text" class="form-control" placeholder="请输税号">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="col-sm-2 col-form-label label-required text-right">银行账号</label>
                            <div class="col-sm-10" style="display: flex">
                                <input [(ngModel)]="goods.goodsName" type="text" class="form-control" placeholder="请输入银行账号">
                                <label class="col-sm-2 col-form-label label-required text-right">开户行名称</label>
                                <input [(ngModel)]="goods.goodsName" type="text" class="form-control" placeholder="请输入开户行名称">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="col-sm-2 col-form-label label-required text-right">税票地址</label>
                            <div class="col-sm-10" style="display: flex">
                                <input [(ngModel)]="goods.goodsName" type="text" class="form-control" placeholder="请输入税票地址">
                                <label class="col-sm-2 col-form-label label-required text-right">税票电话</label>
                                <input [(ngModel)]="goods.goodsName" type="text" class="form-control" placeholder="请输入税票电话">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="col-sm-2 col-form-label label-required text-right">对账日期</label>
                            <div class="col-sm-10" style="display: flex">
                                <input [(ngModel)]="goods.goodsName" type="text" class="form-control" placeholder="请输入对账日期">
                                <label class="col-sm-2 col-form-label label-required text-right">开票日期</label>
                                <input [(ngModel)]="goods.goodsName" type="text" class="form-control" placeholder="请输入开票日期">
                            </div>
                        </div>

                        <div style="text-align: center;height: 45px;">资质附件</div>

                        <div class="card-body">
                            <div class="container m-0">
                                <div class="form-group row">
                                    <label class="col-sm-2 col-form-label label-required text-right">营业执照</label>
                                    <div class="col-sm-10">
                                        <ts-image-card #tsUp [(src)]="goods.goodsThumb" [config]="options" title="点击选择"></ts-image-card>
                                        <label class="col-sm-2 col-form-label label-required text-right">行业许可证</label>
                                        <ts-image-card #tsUp [(src)]="goods.goodsThumb" [config]="options" title="点击选择"></ts-image-card>
                                        <label class="col-sm-2 col-form-label label-required text-right">
                                            法人身份证反面照片
                                        </label>
                                        <ts-image-card #tsUp [(src)]="goods.goodsThumb" [config]="options" title="点击选择"></ts-image-card>
                                        <ts-image-card #tsUp [(src)]="goods.goodsThumb" [config]="options" title="点击选择"></ts-image-card>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="col-sm-2 col-form-label label-required text-right">有效期</label>
                            <div class="col-sm-8" style="display: flex">
                                <input [(ngModel)]="goods.goodsName" type="text" class="form-control" placeholder="请输入有效期">
                                <label class="col-sm-2 col-form-label label-required text-right">有效期</label>
                                <input [(ngModel)]="goods.goodsName" type="text" class="form-control" placeholder="请输入有效期">
                                <label class="col-sm-2 col-form-label label-required text-right">有效期</label>
                                <input [(ngModel)]="goods.goodsName" type="text" class="form-control" placeholder="请输入有效期">

                            </div>
                        </div>
                        <div class="card-body">
                            <div class="container m-0">
                                <div class="form-group row">
                                    <label class="col-sm-2 col-form-label label-required text-right">门头照片</label>
                                    <div class="col-sm-10">
                                        <ts-image-card #tsUp [(src)]="goods.goodsThumb" [config]="options" title="点击选择"></ts-image-card>
                                        <label class="col-sm-2 col-form-label label-required text-right">经营场地照</label>
                                        <ts-image-card #tsUp [(src)]="goods.goodsThumb" [config]="options" title="点击选择"></ts-image-card>
                                        <label class="col-sm-2 col-form-label label-required text-right">
                                            微店头像
                                        </label>
                                        <ts-image-card #tsUp [(src)]="goods.goodsThumb" [config]="options" title="点击选择"></ts-image-card>

                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- <div class="form-group row">
                            <label class="col-sm-2 col-form-label label-required text-right"> </label>
                            <div class="col-sm-10 pt-2">
                                <ts-checkbox class="mr-5" *ngFor="let sel of selectModules;index as i" color="secondary" [value]="i+1" [(ngModel)]="sel.name">{{sel.name}}</ts-checkbox>
                            </div>
                        </div> -->
                        <div class="form-group row">
                            <label class="col-sm-2 col-form-label label-required text-right">到期前三个月</label>
                            <div class="col-sm-7" style="padding-top: 10px">
                                <ts-switch [color]="global.params.color"  [values]="{open:1,close:0}" [(ngModel)]="goods.isActive"></ts-switch>
                            </div>
                        </div>

                    </div>
                </div>


                <div class="mt-2 m-btn">
                    <button routerLink="/customer/customer" tsBtn color="white">返回列表</button>
                    <button *ngIf="goods.id===0" tsBtn loading color="success" (submit)="confirmInsert($event)">确认添加</button>
                    <button *ngIf="goods.id>0" tsBtn loading color="primary" (submit)="confirmUpdate($event)">确认修改</button>
                </div>
            </div>
        </div>
    </div>
</div>